<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
   	<script src="../js/vue.js"></script>
   	<style>
   		.h1{
   			font-size: 28px;
   		}
   	</style>
</head>
<body style="width: 1200px;margin: 0 auto;background: beige;">
	<div id="counter">
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
		<simple-counter></simple-counter>
	</div>
	<div id='box'>
		  <input v-model="message">
		  <span>{{message}}</span>
		  <br>
		  <child v-bind:size="message"></child>
	</div>
	<div id="counter-event-example">
		<p>{{total}}</p>
		<button-counter v-on:increment="incrementTotal"></button-counter>
		<button-counter v-on:increment="incrementTotal"></button-counter>
	</div>
	<div id="example">
		<component v-bind:is="currentView">
		  <!-- 组件在 vm.currentview 变化时改变！ -->
		</component>
	</div>
</body>
<script>
	//var data = {counter:0};
	Vue.component('simple-counter',{
		template:'<button v-on:click="counter++">{{counter}}</button>',
		// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
  		// 但是我们返回给每个组件的实例的却引用了同一个data对象
  		data:function(){
  			return {
  				counter:0
  			}
  		}
	});
	var app = new Vue({
		el:'#counter'
	});
	Vue.component('child',{
		props:['size'],
		computed:{
		  normalizedSize: function () {
			    return this.size.trim().toLowerCase()//trim去掉首尾字符串
			  }
		},
		template:'<h1 id="h1">{{normalizedSize}}</h1>',
	});
	var app1 = new Vue({
		el:'#box',
		data:{
			message:"ADD"
		}
	});
	Vue.component('button-counter',{
		template:'<button v-on:click="increment">{{ counter }}</button>',
		data:function(){
			return {
				counter:0
			}
		},
		methods:{
			increment:function(){
				this.counter += 1,
			    this.$emit('increment')//此处的$emit是触发父组件的incrementTotal事件
			}
		}
	});
	var app3 = new Vue({
		el:'#counter-event-example',
		data:{
			total:0
		},
		methods:{
			incrementTotal:function(){
				this.total++
			}
		}
	})
	
</script>
<script>
	var Home = {
		  template: '<p>Welcome home!</p>'
		}
	var vm = new Vue({
		el:"#example",
		data:{
			currentView: 'posts'
		},
		components:{//components属性
			home:Home,
			posts:{template:'<span>posts</span>'},
			archive:{template:'<span>archive</span>'}
		}
	})
</script>
</html>
